<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <style>
        .news-item{
            display: flex;
            border: 1px solid #eee;
            width: 700px;
            padding: 10px;
            margin-bottom: 5px;
        }

        .thumb{
            display: block;
            width: 230px;
            height: 140px;
            background-color: #ccc;
            margin-right: 10px;
        }

        .right-box{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 12px;
            flex: 1;
        }
        .title{
            font-size: 20px;
            font-weight: normal;
        }

        .tags span{
            display: block;
            float: left;
            background-color: #f0f0f0;
            line-height: 20px;
            padding: 0 10px;
            border-radius: 10px;
            margin-right: 8px;
        }

        .footer{
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div id="news-list">
        <div class="news-item">
            <img class="thumb" src="" alt="">
            <div class="right-box">
                <h1 class="title">5G商用在即，三大运营商收持续下降</h1>
                <div class="footer">
                    <div>
                        <span>胡润百富</span>&nbsp;&nbsp;
                        <span>2019-10-28 10:14:38</span>
                    </div>
                    <span>评论数,66</span>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/axios.min.js"></script>
    <script>
        axios.get('http://ajax-api.itheima.net/api/news').then(res => {
                console.log(res)
                //map 映射

                document.querySelector('#news-list').innerHTML = res.data.data.map(item =>

                    `
            <div class="news-item">
            <img class="thumb" src="${item.img}" alt="">
            <div class="right-box">
                <h1 class="title">${item.title}</h1>
                <div class="footer">
                    <div>
                        <span>${item.source}</span>&nbsp;&nbsp;
                        <span>${item.time}</span>
                    </div>
                    <span>${item.cmtcount}</span>
                </div>
            </div>
        </div>`

                ).join('')
    //    const arr = res.data.data.map(item=>{
    //         return `
    //         <div class="news-item">
    //         <img class="thumb" src="${item.img}" alt="">
    //         <div class="right-box">
    //             <h1 class="title">${item.title}</h1>
    //             <div class="footer">
    //                 <div>
    //                     <span>${item.source}</span>&nbsp;&nbsp;
    //                     <span>${item.time}</span>
    //                 </div>
    //                 <span>${item.cmtcount}</span>
    //             </div>
    //         </div>
    //     </div>`
    //     })
    //     // console.log(arr)
    //     document.querySelector('#news-list').innerHTML = arr.join('')

        })
    </script>
</body>
</html>